// src/components/work/RolesSidebar.tsx
import { Avatar, List, Typography } from 'antd';
import React from 'react';
import './RolesSidebar.scss'; // 确保样式文件路径正确

const { Text } = Typography;

const rolesData = [
  { title: '队长·0', icon: '/7.png' },
  { title: '指导老师·0', icon: '/7.png' },
  { title: '负责人·0', icon: '/7.png' },
  { title: '队员·0', icon: '/7.png' },
];

const RolesSidebar: React.FC = () => {
  return (
    <div className="roles-sidebar">
      <Text strong className="roles-title">角色</Text>
      <List
        itemLayout="horizontal"
        dataSource={rolesData}
        renderItem={item => (
          <List.Item className="role-item">
            <List.Item.Meta
              avatar={<Avatar src={item.icon} alt={item.title} />}
              title={<Text>{item.title}</Text>}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default RolesSidebar;
